<template>
  <div class="Echarts">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
export default {
  name: 'Echarts',
  data(){
    return{
      option: {
        title: {
          text: '全球疫情七日图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['累计确诊', '死亡数量',, '治愈数量'] //顶部线条开关
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['5-9', '6-9', '7-9', '8-9', '9-9', '10-9', '11-9'] //X轴
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '累计确诊',
            type: 'line',
            stack: '',
            data: []
          },
          {
            name: '死亡数量',
            type: 'line',
            stack: '',
            data: []
          },
          {
            name: '治愈数量',
            type: 'line',
            stack: '',
            data: []
          }
        ]
      }
    }
  },
  methods:{
    initEchartData() {
      this.$axios.post('/data/seven').then(rs=>{
        console.log(rs.data.data);
        // console.log("获得数据")
        this.option.series[0].data = rs.data.data.sevenSum;
        this.option.series[1].data = rs.data.data.sevenDeath;
        this.option.series[2].data = rs.data.data.sevenRecover;

        var myChart = this.$echarts.init(document.getElementById('main'));
        // console.log("echart渲染");
        myChart.setOption(this.option);
      })
    },
    getDeath(){
      this.$axios.get('/data/sevenDeath').then(rs=>{
        this.option.series[3].data = rs.data.data.data;
      })
    },
    getRecover(){
      this.$axios.get('/data/sevenRecover').then(rs=>{
        this.option.series[2].data = rs.data.data.data;
      })
    }
  },
  mounted() {
  this.initEchartData();
  }
}
</script>

<style>

</style>
